<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之指令语法 v-??? </title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        指令语法：
            1. 什么是指令？有什么作用？
                指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
            2. Vue框架中的所有指令的名字都以“v-”开始。
            3. 插值是写在标签体当中的，那么指令写在哪里呢？
                Vue框架中所有的指令都是以HTML标签的属性形式存在的，例如：
                    <span 指令是写在这里的>{{这里是插值语法的位置}}</span>
                    注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。
                    是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
            4. 指令的语法规则：
                指令的一个完整的语法格式：
                    <HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
                    表达式：
                        之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么。实际上是一样的。
                        但是需要注意的是：在指令中的表达式位置不能外层再添加一个{{}}
                    不是所有的指令都有参数和表达式：
                        有的指令，不需要参数，也不需要表达式，例如：v-once
                        有的指令，不需要参数，但是需要表达式，例如：v-if="表达式"
                        有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"
            5. v-once 指令
                作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
            
            6. v-if="表达式" 指令
                作用：表达式的执行结果需要是一个布尔类型的数据：true或者false
                    true：这个指令所在的标签，会被渲染到浏览器当中。
                    false：这个指令所在的标签，不会被渲染到浏览器当中。
     -->
    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-once>{{msg}}</h1>
        <h1 v-if="a > b">v-if测试：{{msg}}</h1>
    </div>
    <!-- vue程序 -->
    <script>
        new Vue({
            el : '#app',
            data : {
                msg : 'Hello Vue!',
                a : 10,
                b : 11
            }
        })
    </script>
</body>
</html>